<template>
  <div>
    <v-chart class="chart" :option="option" style="width:800px" />
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart,
  },
  props: ["datalist"],
  provide: {
    [THEME_KEY]: "white",
  },
  setup(props) {
    console.log(props.datalist);
    const option = ref({
      xAxis: {
        name: "选项",
        type: "category",
        data: Object.keys(props.datalist),
      },
      yAxis: {
        name: "人次",
        type: "value",
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        // top: "center",
        feature: {
          // mark: {show: true},
          // dataView: { show: true, readOnly: false, Text: "数据视图" },
          // magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          // restore: {show: true},
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          data: Object.values(props.datalist),
          type: "bar",
        },
      ],
      barWidth: 25,
    });

    return { option };
  },
});
</script>
<style>
.chart {
  height: 400px;
}
</style>
